<template>
  <PhoneShow :formList="formLists" :formConf="formAttrs" :onlyShow="true" />
</template>

<script>
import PhoneShow from "@/components/formGenerator/formComponents/phoneForm.vue";
import {
  deepClone,
  setFormValue,
  arrayToObject,
} from "@/components/formGenerator/utils";
import "./common/initPhone";
import store from "@/store";
import mixins from "./common/mixins";

export default {
  name: "FGPhoneShow",
  mixins: [mixins],
  components: {
    PhoneShow,
  },
  props: {
    value: {
      type: [String, Object],
      default: "",
    },
    // 传入对应的key & value
    form: {
      type: Object,
      default: () => {},
    },
    // 传入的对应的[key:'',value:'']
    formArray: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    formLists() {
      if (this.formAttrs && this.formAttrs.list) {
        let form = this.form;
        if (this.formArray.length) form = arrayToObject(this.formArray);
        return setFormValue(deepClone(this.formAttrs.list || []), form);
      }
      return [];
    },
    formAttrs() {
      let value = deepClone(this.value);
      if (typeof this.value === "string") {
        value = JSON.parse(this.value || "{}");
      }
      return value;
    },
  },
  // 销毁组件时清空store
  destroyed() {
    store.commit("SET_CSSLIST", []);
    store.commit("SET_EVENTLIST", []);
  },
};
</script>

<style lang="scss" scoped></style>
